<template>
    <div class="header" v-loading="loading">
        <h2>{{num.title}}</h2>
      <p>{{num.date}}</p>
      <hr>
        <div id="page" class="page" v-html="num.content">

        </div>
    </div>
</template>

<script>
    export default {
        name: "page",
        data(){
            return{
                num:'',
                loading:true
            }
        },
        mounted(){
            axios.get('http://bird.ioliu.cn/v2/?url=http://101.37.161.89/wordpress/?json=1&p='+this.$route.params.id).then(re=>{
                this.num = re.data.post;
                this.loading = false;
            });
            fetch("http://bird.ioliu.cn/v2/?url=http://101.37.161.89/wordpress/?json=1").then(response=>response.json()).then(json=>{
              console.log(json);
            })
        }
    }
</script>

<style scoped>

  .header{
    padding: 0 16px;
    border: 1px solid #d8d8d8;
    box-shadow: -4.78px -1.52px 23.8px 4.2px rgba(156, 156, 156, 0.25);
    background: url("https://qidian.gtimg.com/qd/images/read.qidian.com/basic_bg.edf95.png") repeat;
    font-family: 'Microsoft YaHei', PingFangSC-Regular, HelveticaNeue-Light, 'Helvetica Neue Light', sans-serif;
    font-size: 18px;
  }
  .header > h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .header > p{
    margin: 0;
  }
  hr{
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
@media only screen and (min-width:641px) {

  .header{
    text-align: left;
    max-width: 1024px;
    margin: 0 auto;
    padding: 60px 64px;;
    border: 1px solid #d8d8d8;
    box-shadow: -4.78px -1.52px 23.8px 4.2px rgba(156, 156, 156, 0.25);
    background: url("https://qidian.gtimg.com/qd/images/read.qidian.com/basic_bg.edf95.png") repeat;
    font-family: 'Microsoft YaHei', PingFangSC-Regular, HelveticaNeue-Light, 'Helvetica Neue Light', sans-serif;
    font-size: 18px;
  }
  hr{
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
    }

</style>
